<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
</head>
<style>
    html,
    body {
        background-color: #fff;
    }

    .placeholder_div {
        background-color: #fbf9f9;
    }

    .padding {
        padding: 0 0.8rem;
        font-size: 0.6rem;
    }

    .item {
        height: 2.5rem;
        line-height: 2.5rem;
        border-bottom: 1px solid #e8e8e8;
        font-size: 0.7rem;
    }

    .item input {
        float: right;
        width: 60%;
        text-align: right;
        height: 2.5rem;
        line-height: 2.5rem;
        font-size: 0.6rem;
    }

    .item img {
        float: right;
        width: 2rem;
        height: 2rem;
        margin-top: 0.25rem;
        border-radius: 1rem;
        object-fit: scale-down;
    }

    .item span {
        float: right;
    }

    .item textarea {
        display: block;
        padding: 0 0 0.5rem 0;
        height: 4rem;
        width: 100%;
        font-size: 0.6rem;
        margin-bottom: 0.7rem;
    }

    .queren_btn {
        width: 96%;
        margin: 1rem 2%;
        height: 2rem;
        line-height: 2rem;
        border-radius: 0.5rem;
        text-align: center;
        background-color: #2780e8;
        color: #fff;
        font-size: 0.7rem;
    }
</style>

<body>
    <div  id="app" v-cloak>
        <div class="placeholder_div"></div>

        <div class="padding">
            <div class="item" onclick="uploadHeadimg(this)">
                头像
                <img :src="avatar" alt="" v-if="avatar">
                <img src="../image/user_avater.png" alt="" v-else>
            </div>
             <div class="item">
                姓名
                <input type="text" v-model="name" placeholder="请填写您的真实姓名">
            </div>
            <!--<div class="item" onclick="select_sex()">
                性别
                <input type="text" readonly v-model="sex_on">
            </div> -->
            <div class="item" style="height: auto;">
                简介
                <span>完善个人介绍，能让患者更信任您哦</span>
                <textarea v-model="brief" placeholder="输入简介"></textarea>
            </div>

            <div class="item" style="height: auto;">
                擅长
                <span>添加专业领域、擅长让患者更快了解您</span>
                <textarea v-model="specially" placeholder="输入擅长"></textarea>
            </div>

            <div class="queren_btn" onclick="next()">确定更改</div>
        </div>
    </div>
</body>

</html>
<script src="../script/set_root.js"></script>

<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/zepto.min.js"></script>
<script type="text/javascript" src="../script/hb.js"></script>
<script type="text/javascript" src="../script/vue.js"></script>
<script type="text/javascript">
    apiready = function () {
        hb_ready();
        app.brief = api.pageParam.brief
        app.specially = api.pageParam.specially
        app.headimg = api.pageParam.avatar
        app.avatar = IMAGE_HTTP + api.pageParam.avatar
        app.name = api.pageParam.name
    }

    //使用vue对数据进行绑定
    var app = new Vue({
        el: '#app',
        data: {
            brief: "",
            specially: "",
            headimg: "",
            sex_on: "请选择性别",
            sex: ["男", "女"],
            sex_index: 0,
            name: "",
            image_http: IMAGE_HTTP,
            avatar: ""
        },
        methods: {

        },

    })
    // 提交
    function next() {
        post_ajax("doctor/save", {
            userId: $api.getStorage("emp").userId,
            avatar: app.headimg,
            brief: app.brief,
            name: app.name,
            specially: app.specially,
        }, function (res, err) {
            if (res.code == 200) {
                // alert(JSON.stringify(res))
                toast("修改成功")
                setTimeout(function () {
                  api.openWin({
                      name: 'main',
                      url: 'main.html',
                      pageParam: {
                          login: 1
                      },
                  });
                  api.sendEvent({
                      name: 'login',
                  });
                    //api.closeWin()
                }, 200);
            } else {
                // alert("网络不通畅，请稍后再试！")
            }
        })
    }
    // 选择性别
    function select_sex() {
        api.actionSheet({
            title: '请选择性别',
            cancelTitle: '取消',
            buttons: app.sex
        }, function (ret, err) {
            var index = ret.buttonIndex; //下标从1开始
            if (index == 3) {
                return
            }
            app.sex_index = index
            for (var i = 0; i < app.sex.length; i++) {
                if (index - 1 == i) {
                    app.sex_on = app.sex[i]
                }
            }

        });
    }

    function uploadHeadimg() {
        api.actionSheet({
            title: '请选择方式',
            cancelTitle: '取消',
            buttons: ['相册', '拍照']
        }, function (ret, err) {
            var index = ret.buttonIndex;
            if (index == 3) {
                return
            }
            switch (index) {
                case 1:
                    //打开相册
                    var trs = isJuris('photos', '需要获取您的相册权限，才能上传照片，请问是否同意？'); //相机权限
                    if(!trs){
                      toast("获取相册权限失败")
                      return;
                    }
                    api.getPicture({
                        sourceType: 'library',
                        encodingType: 'jpg',
                        mediaValue: 'pic',
                        targetWidth: '780',
                        targetHeight: '1040',
                        destinationType: 'url',
                        quality: 70,
                        saveToPhotoAlbum: false
                    }, function (ret, err) {
                        if (ret && ret.data) {

                            //返回的本地路径
                            var returnUrl = ret.data;
                            ajax_upimg(returnUrl)
                        }
                    });
                    break;
                case 2:
                    //打开拍照
                    var trs = isJuris('camera', '需要获取您的相机权限，才能上传照片，请问是否同意？'); //相机权限
                    if(!trs){
                      toast("获取相机权限失败")
                      return;
                    }
                    api.getPicture({
                        sourceType: 'camera',
                        encodingType: 'jpg',
                        mediaValue: 'pic',
                        targetWidth: '780',
                        targetHeight: '1040',
                        destinationType: 'url',
                        quality: 70,
                        saveToPhotoAlbum: false
                    }, function (ret, err) {
                        if (ret && ret.data) {
                            //返回的本地路径
                            var returnUrl = ret.data;

                            ajax_upimg(returnUrl)
                        }
                    });
                    break;
            }
        });
    }

    //执行ajax上传图片
    function ajax_upimg(returnUrl) {
        // alert(returnUrl)
        api.ajax({
            url: "https://api.zetikeji.com/api/storage/file",
            method: 'post',
            data: {
                values: {
                    name: 'haha'
                },
                files: {
                    file: returnUrl
                }
            }
        }, function (ret, err) {
            if (ret.code) {
                if (app.headimg) {
                    app.headimg = "/" + ret.data
                    app.avatar = IMAGE_HTTP + app.headimg
                }

            }
        });
    }
</script>
